<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 房间列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="search_info" placeholder="房间名" class="handle-input mr10" style="width: 85%;"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <div v-for="(item, index) in moduleList">
                <el-card style="margin-top: 30px" class="card-s">
                    <el-row :gutter="100">
                        <el-col :span="8" >
                            <div class="demo-image">
                                <el-image
                                    style="width: 80%; height: 80%;
                                    border-radius:25px;"
                                    :src="item.image_path"
                                    :fit="contain"></el-image>
                            </div>
                        </el-col>
                        <el-col :span="16" >
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <div   style=" line-height: 100px;">
                                        <p style="font-weight:bold;">房间编号：{{item.room_id}}<p>
                                        <p style="font-weight:bold;">房间名称：{{item.name}}<p>
                                        <p style="font-weight:bold;">房间类型：{{item.type}}</p>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div style=" line-height: 100px;">
                                        <p style="font-weight:bold;">游戏上限时长：{{item.long_time}}</p>
                                        <p style="font-weight:bold;">游戏下限时长：{{item.short_time}}</p>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div style=" line-height: 100px;text-align: center;">

                                        <p style="font-weight:bold;">房间描述：{{item.describe}}</p>
                                    </div>

                                </el-col>
                                <el-col :span="6">

                                    <el-button style=";
                                    position: absolute;
                                    right:0px;
                                    bottom:10%;"
                                    size="small" @click="enterRoom(item)" type="primary"plain>进入房间</el-button>
                                </el-col>
                            </el-row>




                        </el-col>
                    </el-row>
                </el-card>
            </div>

            <div style="text-align: center;margin-top: 30px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pagesize"
                    :total="total"
                    layout="total, prev, pager, next">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import ChatRoom from '@/components/page/ChatRoom';

export default {
    data() {
        return {
            total:0,
            pagesize: 10,
            currentPage: 1,
            currentDate: new Date(),
            search_info:"",
            moduleList: [],
            fenyeList:[],
        }
    },
    methods:{
        enterRoom(item){
            axios({
                methods: 'get',
                url:axios.defaults.baseURL + 'room/enter/'+localStorage.getItem('uid')+"/"+item.room_id,
            }).then((res) => {
                if(res.data.code==="000000"){
                    this.$message.success("进入房间"+item.name);
                    console.log(res.data.content)
                    this.$router.push({path:'/Room',query: {chatId:res.data.content, rid:item.room_id}});//"chatId": ,"rid":
                }else{
                    this.$message.error(res.data.desc);
                }
            })
        },
        handleSearch(){
            this.moduleList=[];
            let param=new URLSearchParams();
            param.append('match',this.search_info)
            axios({
                methods: 'get',
                url:axios.defaults.baseURL + 'room/get?match='+this.search_info,
                // param:param
            }).then((res) => {
                if(res.data.code==="000000"){
                    this.moduleList=[];
                    // console.log(this.moduleList)

                    let get_form=res.data.content;
                    get_form.forEach((item,i) => {
                        let p;
                        try{
                            console.log("../../assets/"+item.imageUrl)
                            p=require("../../assets/"+item.imageUrl);
                        }catch (f){
                            p=require("../../assets/1.jpg")
                        }

                        let child_form={
                            describe: item.descri,
                            image_path: p,
                            long_time: item.longTime,
                            name: item.name,
                            place_background: item.placeBackground,
                            recommend_people: item.recommendPeople,
                            short_time: item.shortTime,
                            time_background: item.timeBackground,
                            room_id: item.roomid,
                            type: item.type
                        }
                        this.moduleList.push(child_form);
                    })
                    // console.log(get_form)
                    // console.log(this.moduleList)
                }else{
                    this.$message.error(res.data.desc);
                }
            })
        },
        handleSizeChange: function(val) {
            this.pagesize = val;
        },
        handleCurrentChange:function(currentPage){
            const PageSize = this.pagesize;
            this.currentPage=currentPage
            this.fenyeList=this.moduleList.slice((currentPage-1)*PageSize,currentPage*PageSize)
        }
    },
    created(){
        let param=new URLSearchParams();
        param.append('match',"")
        axios({
            methods: 'get',
            url:axios.defaults.baseURL + 'room/get',
            param:param
        }).then((res) => {
            if(res.data.code==="000000"){
                // this.moduleList=[];
                // console.log(this.moduleList)

                let get_form=res.data.content;
                get_form.forEach((item,i) => {
                    let p;
                    try{
                        console.log("../../assets/"+item.imageUrl)
                        p=require("../../assets/"+item.imageUrl);
                    }catch (f){
                        p=require("../../assets/1.jpg")
                    }

                    let child_form={
                        describe: item.descri,
                        image_path: p,
                        long_time: item.longTime,
                        name: item.name,
                        place_background: item.placeBackground,
                        recommend_people: item.recommendPeople,
                        short_time: item.shortTime,
                        time_background: item.timeBackground,
                        room_id: item.roomid,
                        type: item.type
                    }
                    this.moduleList.push(child_form);
                })
                // console.log(get_form)
                // console.log(this.moduleList)
                this.total=res.data.content.length
                this.fenyeList=this.moduleList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
            }else{
                this.$message.error(res.data.desc);
            }
        })
    },

}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.time {
    /*text-align: right;*/
    font-size: 8px;
    color: blueviolet;
}
.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.card-s {
    width: 100%;
    height: 300px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
